<template>
    <div class="bigLogin">
        <div class="denglu">
        <a>欢迎登录</a>
    </div>
    <div class="input">
        <el-input v-model="phone" placeholder="请输入您的账号" clearable />
    </div>
    <div class="input">
        <el-input
    v-model="password"
    name="p"
    type="password"
    placeholder="请输入您的密码"
    show-password 
    clearable/>
</div>
<div>
<el-button type="primary" class="deng" @click="Login">登录</el-button>
</div>
    </div>
</template>
<script>
import{getLoginUser}from '../api/home/api'
export default{
    data(){  
        return{
            phone:'',
            password:''
        }
    },
    methods:{
        Login: async function(){
           let res = await this.$store.dispatch('getLogin',{phone:this.phone,password:this.password})
           console.log(res);
           if(res.data.code===200){
            this.$store.commit('updateIsLogin',true)
            this.$store.commit('updateToken',res.data.token)
            let result =await getLoginUser(res.data.account.id)
            console.log(result)
            this.$store.commit('updateUser',result)
            this.$router.push('/InfoUser')
           }
           else{
            alert("手机号或者密码错误")
            this.password=''
           }
        }
    }
}
</script>
<style>
.bigLogin{
    flex-direction: column;
    width: 50%;
    height: 700px;
    border: 3px solid rgb(19, 20, 20);
    margin: auto;
}
.input{
    margin: auto;
    width: 30%;
    margin-top: 20px;
    border: 3px solid rgb(19, 20, 20);
}
.denglu{
    color: rgb(153, 192, 11);
    font-size: 50px;
    text-align: center;
}
.deng{
    margin-top: 2%;
  margin-left: 47%;
  /* margin-right: 46%; */
}
</style>